<template>
  <div id="userLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <a-space>
          <img src="../assets/logo.png" class="logo" />
          <div>鱼答答 AI 答题应用平台</div>
        </a-space>
      </a-layout-header>
      <a-layout-content class="content">
        <h2>用户登录</h2>
        <a-form
          :style="{ width: '400px' }"
          :model="user"
          label-align="left"
          auto-label-width
          @submit="handleSubmit"
        >
          <a-form-item
            field="userAccount"
            tooltip="最低4字符"
            label="账号"
            :rules="[
              { required: true, message: '账号不能为空' },
              { minLength: 4, message: '不能小于4位字符' },
            ]"
            :validate-trigger="['change', 'input']"
          >
            <a-input placeholder="请输入账号" v-model="user.userAccount" />
          </a-form-item>
          <a-form-item
            field="userPassword"
            label="密码"
            tooltip="最低8位数"
            :rules="[
              { required: true, message: '密码不能为空' },
              { minLength: 8, message: '密码必须大于8位' },
            ]"
            :validate-trigger="['change', 'input']"
          >
            <a-input-password
              v-model="user.userPassword"
              v-model:visibility="visibility"
              placeholder="请输入密码"
              :style="{ width: '320px' }"
              :defaultVisibility="false"
              allow-clear
            />
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" type="primary" style="width: 120px"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
        <a-button
          class="abutton"
          html-type="submit"
          @click="router.push('/user/register')"
          >新用户注册-></a-button
        >
      </a-layout-content>
      <a-layout-footer class="footer">
        <a href="https://www.code-nav.cn" target="_blank">
          编程导航 by 程序员鱼皮
        </a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { userLoginUserStore } from "@/store/user";
import message from "@arco-design/web-vue/es/message";
import { userLoginUsingPost } from "@/api/userController";
const router = useRouter();
const loginUserStore = userLoginUserStore();
const visibility = ref(true);
// const js = ref("");
const user = reactive({
  userAccount: "",
  userPassword: "",
});
const handleSubmit = async () => {
  const res = await userLoginUsingPost(user);
  console.log(res);
  if (res.data.code == 0) {
    message.success("登录成功");
    loginUserStore.fetchLoginUser();
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error(res.data.message);
  }
};
</script>
<style scoped>
#userLayout {
  text-align: center;
  background: url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png")
    0% 0% / 100% 100%;
}

#userLayout .logo {
  width: 48px;
  height: 48px;
}

#userLayout .header {
  margin-top: 16px;
  font-size: 21px;
}

#userLayout .content {
  margin: 0 auto;
  margin-top: 9%;
  padding: 20px;
}

#userLayout .footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  text-align: center;
}
.abutton {
  position: absolute;
  top: 50.4%;
  left: 55%;
}
</style>
